<template>
    <div class="fr page">
        <div class="sui-pagination clearfix">
            <ul>
                <li class="prev" :class="pageNo == 1 ? 'disabled' : ''"  @click="$emit('getPageNo', pageNo - 1)">
                    <a>«上一页</a>
                </li>
                <li :class="{active: pageNo == 1}" v-if="startNumAndEndNum.start > 1" @click="$emit('getPageNo', 1)">
                    <a>1</a>
                </li>
                <li class="dotted" v-if="startNumAndEndNum.start > 2">
                    <a>...</a>
                </li>
                <li v-for="(page, index) in startNumAndEndNum.end" :key="index" v-if="page >= startNumAndEndNum.start"
                    @click="$emit('getPageNo', page)" :class="{active: pageNo == page}">
                    <a>{{ page }}</a>
                </li>
                <li class="dotted" v-if="totalPage - startNumAndEndNum.end > 2"> <a>...</a></li>

                <li :class="{active: pageNo == totalPage}" v-if="startNumAndEndNum.end < totalPage" @click="$emit('getPageNo', totalPage)">
                    <a>{{ totalPage }}</a>
                </li>
                <li class="next" :class="pageNo == totalPage ? 'disabled' : ''" @click="$emit('getPageNo', pageNo + 1)">
                    <a>下一页»</a>
                </li>
            </ul>
            <div><span>共{{ total }}条&nbsp;</span></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Pagination',
    props: ['pageNo', 'pageSize', 'total', 'continues'],
    computed: {
        totalPage() {
            return Math.ceil(this.total / this.pageSize)
        },
        startNumAndEndNum({ continues, totalPage, pageNo }) {
            // 
            let start = 0, end = 0
            if (continues > totalPage) {
                // 总页数没有连续的页码多
                start = 1
                end = totalPage
            } else {
                start = pageNo - parseInt(continues / 2)
                end = pageNo + parseInt(continues / 2)
                if (start <= 0) {
                    start = 1
                    end = continues
                }
                if (end > totalPage) {
                    end = totalPage
                    start = totalPage - continues + 1
                }
            }
            return { start, end }
        },
    },

}
</script>

<style lang="less" scoped>
.page {
    width: 900px;
    height: 66px;
    overflow: hidden;
    float: right;

    .sui-pagination {
        margin: 18px 0;

        ul {
            margin-left: 0;
            margin-bottom: 0;
            vertical-align: middle;
            width: 650px;
            float: left;

            li {
                line-height: 18px;
                display: inline-block;

                a {
                    position: relative;
                    float: left;
                    line-height: 18px;
                    text-decoration: none;
                    background-color: #fff;
                    border: 1px solid #e0e9ee;
                    margin-left: -1px;
                    font-size: 14px;
                    padding: 9px 18px;
                    color: #333;
                }

                &.active {
                    a {
                        background-color: #fff;
                        color: #e1251b;
                        border-color: #fff;
                        cursor: default;
                    }
                }

                &.prev {
                    a {
                        background-color: #fafafa;
                    }
                }

                &.disabled {
                    a {
                        color: #999;
                        cursor: default;
                    }
                }

                &.dotted {
                    span {
                        margin-left: -1px;
                        position: relative;
                        float: left;
                        line-height: 18px;
                        text-decoration: none;
                        background-color: #fff;
                        font-size: 14px;
                        border: 0;
                        padding: 9px 18px;
                        color: #333;
                    }
                }

                &.next {
                    a {
                        background-color: #fafafa;
                    }
                }
            }
        }

        div {
            color: #333;
            font-size: 14px;
            float: right;
            width: 241px;
        }
    }
}
</style>